<template>
    <view class="container">
        <view class='has-info' v-if="addressList.length">
            <view class='info-item' @click="selectAddress(item)" v-for="item in addressList" :key="item.id">
                <!-- 地址选择 -->
                <view v-if="type" class="selected">
                    <image v-if="checkAddressId===item.id" class="img" src="/static/images/icon/gou-red.png"></image>
                    <image v-else class="img" src="/static/images/icon/gou-gray.png"></image>
                </view>
                <!-- 地址信息 -->
                <view class="info-wrap">
                    <view class="addr">
                        <view class="top">{{item.address}}</view>
                        <view class="text">{{item.full_region}}</view>
                    </view>
                    <view class="name">
                        <view class="text">{{item.name}} {{item.mobile}}</view>
                        <view class="default">默认</view>
                    </view>
                </view>
                <!-- 编辑 -->
                <view class="edit-wrap">
                    <image @click.stop="goUrl('/pkgUser/addressInfo/addressInfo?id='+item.id)" class="img"
                        src="/static/images/icon/edit.png"></image>
                </view>
            </view>
        </view>
        <view class="no-info" v-else>
            <image src="/static/images/icon/position-deny.png" class="img"></image>
            <view class="text">没有地址信息</view>
        </view>
        <!-- 新增 -->
        <view class="btn-wrap">
            <view class="btn" @click="goUrl('/pkgUser/addressInfo/addressInfo')">新增收货地址</view>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                addressList: [], //地址列表
                checkAddressId: '', //勾选的地址的ID
                type: '', //如果存在，说明是选择地址是从确认订单页面过来的，否则就是从我的地址管理页面过来的
            };
        },
        onLoad(options) {
            console.log('从那个页面过来的---', options);
            this.type = options.type
        },
        //页面打开时触发
        onShow() {
            //1.请求获取地址列表
            this.getAddresslist()

            //2.从本地存储中读取地址Id
            const addressId = uni.getStorageSync('addressId')
            //修改页面标题
            uni.setNavigationBarTitle({
                title: '请选择地址',
            })
            //设置给data变量，用于页面判断
            if (addressId) {
                this.checkAddressId = addressId
            } else {
                this.checkAddressId = 0
            }
        },
        methods: {
            //1.获取地址列表数据
            async getAddresslist() {
                this.addressList = await uni.$http.get('/address/getAddresses')
            },
            //2.
            selectAddress(row) {
                console.log(row);
                this.checkAddressId = row.id
                //把当前行的地址信息，存储到本地
                uni.setStorageSync('addressId', row.id)
                uni.navigateBack()

            }
        }
    }
</script>

<style lang="scss">
    page {
        background: #fafafa;
        height: 100%;
    }

    .container {
        height: 100%;
        display: flex;
        align-items: stretch;
        overflow-x: hidden;
    }

    .has-info {
        display: flex;
        flex-direction: column;
        padding: 30rpx;
        width: 100%;
    }

    .has-info .info-item {
        padding: 30rpx 0;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        background: #fff;
        border-radius: 10rpx;
        box-shadow: 2rpx 8rpx 18rpx #f1f1f1;
        margin-bottom: 24rpx;
        position: relative;
    }

    .has-info .info-item .edit-wrap {
        padding: 30rpx;
        position: absolute;
        right: 0;
        bottom: 0;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .has-info .info-item .edit-wrap .img {
        width: 42rpx;
        height: 42rpx;
    }

    .has-info .info-item .selected {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 30rpx 0 30rpx 30rpx;
    }

    .has-info .info-item .selected .img {
        width: 40rpx;
        height: 40rpx;
    }

    .has-info .info-item .info-wrap {
        display: flex;
        flex-direction: column;
        padding-left: 30rpx;
    }

    .has-info .info-item .info-wrap .addr {
        display: flex;
        flex-direction: column;
        margin-bottom: 10rpx;
    }

    .has-info .info-item .info-wrap .addr .top {
        font-size: 30rpx;
        font-weight: 500;
        margin-bottom: 4rpx;
    }

    .has-info .info-item .info-wrap .addr .text {
        font-size: 24rpx;
        color: #777;
    }

    .has-info .info-item .info-wrap .addr .img-wrap {
        width: 44rpx;
        height: 44rpx;
        margin-right: 10rpx;
    }

    .has-info .info-item .info-wrap .name {
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }

    .has-info .info-item .info-wrap .name .img-wrap {
        width: 44rpx;
        height: 44rpx;
        margin-right: 10rpx;
    }

    .has-info .info-item .info-wrap .name .img {
        width: 42rpx;
        height: 42rpx;
    }

    .has-info .info-item .info-wrap .name .default {
        font-size: 22rpx;
        color: #409eff;
        background: #faedef;
        text-align: center;
        padding: 2rpx 10rpx;
        border-radius: 4rpx;
    }

    .has-info .info-item .info-wrap .name .text {
        font-size: 26rpx;
        margin-right: 10rpx;
    }

    .has-info .info-item .id-wrap {
        display: flex;
        flex-direction: column;
    }

    .has-info .info-item .id-wrap .ids {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        font-size: 26rpx;
        color: #5d6777;
        margin-bottom: 8rpx;
    }

    .has-info .info-item .id-wrap .ids .id-name {
        margin-right: 20rpx;
    }

    .has-info .info-item .id-wrap .no-ids {
        font-size: 26rpx;
        color: #ffbb12;
    }

    .has-info .add-btn {
        display: flex;
        justify-content: center;
        align-items: center;
        background: #fff;
        border-radius: 10rpx;
        box-shadow: 2rpx 8rpx 18rpx #f1f1f1;
        margin-bottom: 24rpx;
        padding: 30rpx 0;
    }

    .has-info .add-btn .icon-wrap {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 40rpx;
        height: 40rpx;
        margin-right: 8rpx;
    }

    .has-info .add-btn .icon-wrap .img {
        width: 40rpx;
        height: 40rpx;
    }

    .has-info .add-btn .text {
        font-size: 28rpx;
        color: #ffc310;
    }

    .no-info {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        // margin-top: 300rpx;
        width: 100%;
        height: 100%;
    }

    .no-info .img {
        width: 100rpx;
        height: 100rpx;
        margin-bottom: 30rpx;
    }

    .no-info .text {
        font-size: 30rpx;
        color: #999;
        text-align: center;
        margin-bottom: 30rpx;
    }

    .no-info .add-btn {
        color: #192841;
        background: linear-gradient(to right, #409eff, #74acf1);
        border-radius: 100px;
        width: 400rpx;
        height: 80rpx;
        line-height: 80rpx;
        text-align: center;
        font-size: 28rpx;
        margin: 0 auto;
    }

    .btn-wrap {
        position: fixed;
        bottom: 0;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .btn-wrap .btn {
        width: 100%;
        background: linear-gradient(to right, #ff3456, #ff347d);
        color: #fff;
        font-size: 28rpx;
        text-align: center;
        height: 110rpx;
        line-height: 100rpx;
    }
</style>
